<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Search Results</title>
    <link rel="stylesheet" href="../layui-v2.9.10/layui/css/layui.css">
</head>
<style>
    body {
        background-color: #f5f5f5;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
    }
    .layui-nav-child{
        color: #0C0C0C;
    }
    .layui-header {
        background-color: #303030;
        color: #fff;
        padding: 0 15px;
    }
    .layui-header .layui-logo {
        font-size: 24px;
        line-height: 60px;
        margin-right: 30px;
    }

    .layui-side, .layui-layout-admin .layui-body, .layui-footer {
        background-color: #f5f5f5;
        color: #333;
    }
    .layui-card-header {
        background-color: #303030;
        color: #fff;
    }
    .layui-card-body {
        background-color: #fff;
        color: #333;
    }
    .layui-layout-admin .layui-body {
        padding: 15px;
    }
    .layui-side {
        background-color: #333; /* 背景颜色 */
        flex-shrink: 0;
    }
    .layui-side-scroll {
        height: 100%; /* 高度设为100% */
        overflow: auto;
    }
</style>
<body>
<div class="layui-layout layui-layout-admin">
    <%--头部导航--%>

    <div class="layui-header">
        <a href="home.jsp" >
            <div class="layui-logo layui-hide-xs">新闻发布系统</div>
        </a>


        <!-- 头部区域 -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a >用户管理</a></li>
            <li class="layui-nav-item"><a >新闻管理</a></li>
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="home.jsp">
                    <img src="../image/back-image.jpg" class="layui-nav-img"> <!-- 修改为实际用户头像链接 -->
                    <%= session.getAttribute("username") %>
                </a>
                <dl class="layui-nav-child" style="color: #0C0C0C">
                    <dd><a href="home.jsp">首页</a></dd>
                    <dd><a href="../infoServlet.do">个人信息</a></dd>
                    <dd><a href="setting.jsp">设置</a></dd>
                    <dd><a href="../home/login-2.jsp;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a>
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>

    </div>
    <div class="layui-side">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域 -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a >用户列表</a>
                    <dl class="layui-nav-child">
                        <dd><a href="usermanager.jsp;">用户查询</a></dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a >新闻列表</a>
                    <dl class="layui-nav-child">
                        <dd><a href="news_publish.jsp">新闻发布</a></dd>
                        <dd><a href="news_view.jsp">新闻浏览</a></dd>
                    </dl>
                </li>

            </ul>
        </div>
    </div>

        <div class="layui-body" style="padding: 20px;">

                <!-- 内容主体区域 -->
                <div>
                    <form class="layui-form layui-row layui-col-space16" method="post" action="../SearchServlet.do">
                        <div class="layui-col-md4">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-username"></i>
                                </div>
                                <input type="text" name="username" value="" placeholder="Username" class="layui-input" lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-input-wrap">
                                <input type="text" name="id" placeholder="ID" lay-affix="clear" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-date"></i>
                                </div>
                                <input type="text" name="date" readonly placeholder="Date" class="layui-input demo-table-search-date">
                            </div>
                        </div>
                        <div class="layui-btn-container layui-col-xs12">
                            <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
                            <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                        </div>
                    </form>

                    <h1 style="margin-bottom: 20px;">查询结果</h1>
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <table id="searchResultsTable" class="layui-hide" lay-filter="searchResultsTable"></table>
                        </div>
                    </div>

                </div>

            </div>
            <h1 style="margin-bottom: 20px;">查询结果</h1>

        </div>

</div>
<script src="../layui-v2.9.10/layui/layui.js"></script>
<script>
    layui.use(['table'], function(){
        var table = layui.table;

        // 从 JSTL 获取数据并生成 JavaScript 数组
        var searchResults = [
            <c:forEach var="user" items="${searchResults}">
            {
                id: '${user.id}',
                username: '${user.username}',
                gender: '${user.gender}',
                profession: '${user.profession}',
                favor: '${user.favor}',
                description: '${user.description}',
                state: '${user.state==1 ?"启用":"禁用"}',
                role: '${user.role==1 ?"用户":"管理员"}'
            }<c:if test="${!status.last}">,</c:if>
            </c:forEach>
        ];

        // 渲染表格
        table.render({
            elem: '#searchResultsTable',
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
                {field: 'username', title: 'Username', width: 120},
                {field: 'gender', title: 'Gender', width: 100},
                {field: 'profession', title: 'Profession', width: 150},
                {field: 'favor', title: 'Favor', width: 120},
                {field: 'description', title: 'Description', width: 200},
                {field: 'state', title: 'State', width: 100},
                {field: 'role', title: 'Role', width: 100}
            ]],
            data: searchResults,
            page: true,
            skin: 'line', // 表格风格
            even: true // 开启隔行背景
        });
    });

    // 提交用servlet查询
    layui.use(['table', 'form'], function(){
        var table = layui.table;
        var form = layui.form;
        //
        //     // Render Table
        //     table.render({
        //     elem: '#ID-table-demo-search',
        //     url: '../SearchServlet1.do', // Specify the servlet URL to fetch data
        //     cols: [[
        // {type: 'radio', title: '😊', fixed: true},
        // {field: 'user_id', title: 'ID', width: 80, sort: true, fixed: true},
        // {field: 'username', title: 'Username', width: 120},
        // {field: 'gender', title: 'Gender', width: 80, sort: true},
        // {field: 'profession', title: 'Profession', width: 120},
        // {field: 'favorString', title: 'Favor'},
        // {field: 'description', title: 'Description'},
        // {field: 'state', title: 'State'},
        // {field: 'role', title: 'Role'}
        //     ]],
        //     page: true,
        //     height: 310
        // });

        // Date Picker
        layui.laydate.render({
            elem: '.demo-table-search-date'
        });

        // Form Submission
        form.on('submit(demo-table-search)', function(data){
            // Perform any additional processing if needed
        });
    });



    // 基本功能
    layui.use(['element', 'layer'], function(){
        var element = layui.element;
        var layer = layui.layer;

// 监听导航点击事件
        element.on('nav(test)', function(elem){
            layer.msg(elem.text());
        });
    });
</script>
</body>
</html>
